import React, { lazy, Suspense } from "react";
import Css from "../../../assets/sass/home/home/home.module.scss";
import { Route, Switch } from "react-router-dom";
import config from "../../../config";
//引入二级路由所需组件
let IndexComponent = lazy(() => import("../index"));
let CartComponent = lazy(() => import("../cart"));
let MyComponent = lazy(() => import("../../users/mine"));
class HomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bHomeStyle: true,
      bCartStyle: false,
      bMyStyle: false,
    };
  }

  //页面跳转
  goPage(url) {
    console.log(url);
    console.log(this.props);
    this.props.history.push(config.path + url);
  }
  //判断路径，设置高亮导航
  handleNavStyle(props) {
    switch (props.location.pathname) {
      case config.path + "home/index":
        this.setState({
          bHomeStyle: true,
          bCartStyle: false,
          bMyStyle: false,
        });
        break;
      case config.path + "home/cart":
        this.setState({
          bHomeStyle: false,
          bCartStyle: true,
          bMyStyle: false,
        });
        break;
      case config.path + "home/my":
        this.setState({
          bHomeStyle: false,
          bCartStyle: false,
          bMyStyle: true,
        });
        break;
      default:
        break;
    }
  }

  //进入页面就获取路径设置导航高亮
  componentDidMount() {
    this.handleNavStyle(this.props);
  }

  //点击的时候路径有变化，监听路径变化更新导航高亮
  componentWillReceiveProps(newprops) {
    this.handleNavStyle(newprops);
  }
  render() {
    return (
      <div>
        <React.Fragment>
          <Suspense fallback={<div>loading</div>}>
            <Switch>
              {/* 二级路由 */}
              <Route
                path={config.path + "home/index"}
                component={IndexComponent}
              ></Route>
              <Route
                path={config.path + "home/cart"}
                component={CartComponent}
              ></Route>
              <Route
                path={config.path + "home/my"}
                component={MyComponent}
              ></Route>
            </Switch>
          </Suspense>
        </React.Fragment>
        <div className={Css["bottom-nav"]}>
          <ul onClick={this.goPage.bind(this, "home/index")}>
            <li
              className={
                this.state.bHomeStyle
                  ? Css["home"] + " " + Css["active"]
                  : Css["home"]
              }
            ></li>
            <li
              className={
                this.state.bHomeStyle
                  ? Css["text"] + " " + Css["active"]
                  : Css["text"]
              }
            >
              首页
            </li>
          </ul>
          <ul onClick={this.goPage.bind(this, "home/cart")}>
            <li
              className={
                this.state.bCartStyle
                  ? Css["cart"] + " " + Css["active"]
                  : Css["cart"]
              }
            ></li>
            <li
              className={
                this.state.bCartStyle
                  ? Css["text"] + " " + Css["active"]
                  : Css["text"]
              }
            >
              购物车
            </li>
          </ul>
          <ul onClick={this.goPage.bind(this, "home/my")}>
            <li
              className={
                this.state.bMyStyle
                  ? Css["my"] + " " + Css["active"]
                  : Css["my"]
              }
            ></li>
            <li
              className={
                this.state.bMyStyle
                  ? Css["text"] + " " + Css["active"]
                  : Css["text"]
              }
            >
              我的
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default HomeComponent;
